<template>
    <div>
        <!-- 头部 -->
        <div class="tq-header">
            <div class="w tq-header-inner">
                <div class="header-inner-logo">
                    <a href="https://www.qweather.com/"> 和风 </a>
                </div>
                <div class="header-inner-input">
                    <el-input v-model="keyword" placeholder="请输入城市"></el-input>
                    <el-button @click="updatainfo(keyword)">Click Me</el-button>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="tq-list">
            <div class="w tq-list-inner">
                <h1 v-show="updateStatus.isWelcome">欢迎使用天气系统</h1>
                <h1 v-show="updateStatus.isLoading">Loading</h1>
                <h1 v-show="updateStatus.errMsg">网络链接失效</h1>

                <transition name="el-fade-in-linear">
                    <!-- <el-button type="success" icon="el-icon-search">城市信息</el-button> -->
                    <div v-show="updateStatus.infoshow" class="list-inner-info">
                        <ul class="cityinfo">
                            <li>城市信息</li>
                            <li>国家：{{ country }}</li>
                            <li>省份：{{ province }}</li>
                            <li>直辖市：{{ city }}</li>
                        </ul>
                        <ul class="weatherexpected">
                            <li>天气预报</li>
                            <li v-for="winfo in weatherInfo" :key="winfo.fxDate">
                                {{ winfo.fxDate }}：{{ winfo.tempMax }}\{{ winfo.tempMin }}
                            </li>
                        </ul>
                        <ul class="livinginfo">
                            <li>生活指数</li>
                            <li v-for="lindex in liveIndex" :key="lindex.type">
                                {{ lindex.name }}：{{ lindex.category }}\{{ lindex.text }}
                            </li>
                        </ul>
                    </div>
                </transition>
                <!-- <transition name="el-fade-in">
                    <div v-show="show" class="transition-boxJIZZ">天气三天预报</div>
                  </transition>
                  <transition name="el-fade-in">
                    <div v-show="show" class="transition-boxJIZZ">生活指南</div>
                  </transition> -->
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: "sv",
    data() {
        return {
            updateStatus: {
                isWelcome: true,
                isLoading: false,
                errMsg: "",
                infoshow: false,
            },

            keyword: "",
            country: "",
            province: "",
            city: "",
            cityid: 1234,
            weatherInfo: [],
            liveIndex: [],
        };
    },
    methods: {
        updatainfo(keyword) {
            this.updateStatus = {
                ...this.updateStatus,
                ...{ isWelcome: false, isLoading: true },
            };
            var _this = this;
            axios
                .get(
                    `https://geoapi.qweather.com/v2/city/lookup?location=${keyword}&key=0f309c058b424090bbf5b2c596e05d2a`
                )
                .then(
                    (response) => {
                        console.log("请求成功1.1", response.data.location[0]);
                        this.country = response.data.location[0].country;
                        this.province = response.data.location[0].adm1;
                        this.city = response.data.location[0].adm2;
                        this.cityid = response.data.location[0].id;
                        console.log("请求成功1.2", this.cityid);
                        order();

                        function getWeatherInfo() {
                            return axios
                                .get(
                                    `https://devapi.qweather.com/v7/weather/3d?location=${_this.cityid}&key=0f309c058b424090bbf5b2c596e05d2a`
                                )
                                .then(
                                    (response) => {
                                        // console.log("请求成功2.1", this.cityid);
                                        console.log("请求成功2.2", response.data.daily);
                                        _this.weatherInfo = response.data.daily;
                                    },
                                    (error) => {
                                        console.log("请求失败2", error.message);
                                    }
                                );
                        }

                        function getLiveIndex() {
                            return axios
                                .get(
                                    `https://devapi.qweather.com/v7/indices/1d?type=1,2&location=${_this.cityid}&key=0f309c058b424090bbf5b2c596e05d2a`
                                )
                                .then(
                                    (response) => {
                                        // console.log("请求成功3.1", this.cityid);

                                        console.log("请求成功3.2", response.data.daily);
                                        _this.liveIndex = response.data.daily;
                                        _this.updateStatus = {
                                            ..._this.updateStatus,
                                            ...{ isLoading: false, infoshow: true },
                                        };
                                    },
                                    (error) => {
                                        console.log("请求失败3", error.message);
                                        _this.updateStatus = {
                                            ..._this.updateStatus,
                                            ...{ isLoading: false, infoshow: false, errMsg: error.message },
                                        };
                                    }
                                );
                        }

                        //  按顺序'并发'请求
                        async function order() {
                            await getWeatherInfo();
                            await getLiveIndex();
                            //es7 的 async 和 await 书写 看起来更美观写  更像是同步
                        }
                    },
                    (error) => {
                        console.log("请求失败1", error.message);
                        this.errMsg = error.message;
                    }
                );
        },
    },
};
</script>

<style scoped>
/* ----------------------------------------------- */
.w {
    width: 900px;
    margin: auto;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

/* <!-- 头部 --> */
.tq-header {
    height: 200px;

    /* background: #c3097b9b; */
}

.tq-header-inner {
    height: 200px;
    /* background-color: orange; */
    display: flex;
    align-items: center;
}

.tq-header-inner a {
    display: block;
    background: url(@/assets/和风logo.png) no-repeat;
    background-size: 100%;
    width: 200px;
    height: 48px;
    text-indent: -99em;
}

.tq-header-inner a h1 {
    text-indent: -99em;
}

.header-inner-logo {
    margin-right: 50px;
}

.header-inner-input {
    height: 40px;
    display: flex;
    flex: 0.8;
    /* background-color: #409eff; */
}

.el-input {
    margin-right: 20px;
}

/* <!-- 内容 --> */
.tq-list {
    margin: 50px 0;
    height: 500px;
    /* background: #15ccd2; */
}

.tq-list-inner {
    /* background-color: yellow; */
    height: 500px;
}

.list-inner-info {
    /* margin-bottom: 10px; */
    display: flex;
    justify-content: space-around;
    height: 200px;
    /* border-radius: 4px; */
    /* background-color: #409eff; */
    /* text-align: center; */
    color: rgb(12, 12, 12);
    /* padding: 40px 20px; */
    /* box-sizing: border-box; */
    /* margin-right: 20px; */
}

.list-inner-info ul {
    /* background: #db0606; */
}

.cityinfo {
    flex: 0.3;
}

.weatherexpected {
    flex: 0.3;
}

.livinginfo {
    flex: 0.4;
}
</style>